<template>
    <div>
        <div class="input-div">
            <n-input
                size="large"
                round
                placeholder="输入动画名"
                v-model:value="searchStr"
                @keydown.enter="handleClick"
            >
                <template #prefix>
                    <n-icon :size="24">
                        <bolt></bolt>
                    </n-icon>
                </template>
                <template #suffix>
                    <n-button size="medium" quaternary round @click="handleClick">
                        <template #icon>
                            <n-icon :size="24">
                                <search></search>
                            </n-icon>
                        </template>
                    </n-button>
                </template>
            </n-input>
        </div>
        <div class="text-div" v-if="ifSeen">
            <n-h3>
                搜索以查看最新一次的结果
            </n-h3>
        </div>
        <div class="button-div">
            <n-space>
                <n-button
                    secondary
                    round
                    v-for="urleach in urlSaver"
                    :key="urleach"
                    type="success"
                    size="large"
                    @click="toThere(urleach)"
                >点击查看结果</n-button>
            </n-space>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useMainStore } from "../store/index";
import { NIcon, NInput, NButton, useNotification, NSpace, NH3 } from "naive-ui";
import { Bolt, Search } from "@vicons/fa";

let mainStore = useMainStore();
let notification = useNotification();

let searchStr = ref("");

let urlSaver = reactive([]);

let ifSeen = ref(mainStore.checkIfPassed);

function handleClick() {
    if (mainStore.checkIfPassed) {
        urlSaver.splice(0);

        if (searchStr.value == "") {
            notification["warning"]({
                content: "搜索状态",
                meta: "内容不可为空!",
                duration: 4000
            })
        } else {
            mainStore.changeSearchWhat(searchStr.value);

            mainStore.getWholeFromPreUrl.forEach(item => {
                urlSaver.push(item);
            });

            notification["success"]({
                content: "搜索状态",
                meta: "成功!",
                duration: 4000
            })
        }
    } else {
        notification["error"]({
            content: "密钥验证",
            meta: "失败!",
            duration: 4000
        })
    }
}

function toThere(url) {
    window.open(url);
}

</script>

<style scoped>
.input-div {
    padding: 16px;
    width: 50%;
}
.button-div {
    padding : 16px;
}
.text-div {
    padding : 8px 16px 0px 32px;
}
</style>